<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <title>列表组</title>
</head>
<body>
    <div class="container">
        <h2>水果</h2>
        <!-- 列表组：在ul上添加.list-group来创建一个列表组 -->
        <ul class="list-group">
            <!-- li标签上添加.list-group-item -->
            <li class="list-group-item">苹果</li>
            <li class="list-group-item">香蕉</li>
            <li class="list-group-item">西瓜</li>
            <li class="list-group-item">葡萄</li>
        </ul>
        <hr>
        <ul class="list-group">
            <!-- .list-group-item-action可以使用a标签创建一个可以跳转的列表组选项 -->
            <a href="https://www.bing.com/" class="list-group-item list-group-item-action">苹果</a>
            <!-- 添加.disabled类可以让列表组选项显示为禁用的样式,但是不影响跳转 -->
            <a href="https://www.bing.com/" class="list-group-item list-group-item-action disabled">香蕉</a>
            <!-- .active显示活动样式，蓝色背景 -->
            <a href="https://www.bing.com/" class="list-group-item list-group-item-action active">西瓜</a>
        </ul>
        <ul class="list-group">
            <li class="list-group-item">默认样式</li>
            <li class="list-group-item list-group-item-light">light</li>
            <li class="list-group-item list-group-item-secondary">secondary</li>
            <li class="list-group-item list-group-item-dark">dark</li>
            <li class="list-group-item list-group-item-primary">primary</li>
            <li class="list-group-item list-group-item-info">info</li>
            <li class="list-group-item list-group-item-success">success</li>
            <li class="list-group-item list-group-item-warning">warning</li>
            <li class="list-group-item list-group-item-danger">danger</li>
        </ul>
        <hr>

        <ul class="list-group">
            <!-- .d-flex可以让一个非flexbox变成flexbox -->
            <!-- .justify-content-between可以让盒子内的元素平均分布 -->
            <!-- .align-items-center让元素垂直对齐 -->
            <li class="list-group-item d-flex justify-content-between align-items-center">
                坤坤
                <span class="badge badge-primary badge-pill">6</span>
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center">
                穿山甲
                <span class="badge badge-primary badge-pill">8</span>
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center">
                华强
                <span class="badge badge-danger badge-pill">10</span>
            </li>
        </ul>
        <hr>
        <!-- 列表组中显示图片 -->
        <ul class="list-group">
            <li class="list-group-item d-flex justify-content-between align-items-center">
                NIIT
                <div class="image-parent">
                    <!-- .img-fluid让图片变成流式布局 -->
                    <img src="../images/img.png" class="img-fluid" alt="">
                </div>
            </li>
        </ul>
        <hr>
        <!-- 用户自定义内容的列表组 -->
        <ul class="list-group">
            <li class="list-group-item d-flex justify-content-between align-items-center">
                <!-- .flex-column可以让容器内的元素垂直排布 -->
                <div class="flex-column">
                    NIIT China
                    <p><small>Shanghai</small></p>
                    <span class="badge badge-info badge-pill">1 course to offer</span>
                </div>

                <div class="image-parent">
                    <!-- .img-fluid让图片变成流式布局 -->
                    <img src="../images/img.png" class="img-fluid" alt="">
                </div>
            </li>
        </ul>

    </div>
</body>
</html>